<template>
    <div class="top">个人资料</div>
    <div class="loginbox">
     <div class="logintop">
        <img src="/image23.png" alt="">
        <!-- <span class="loginname" @click="gotologin">登录</span> -->
        <span class="loginname" @click="gotologin">
            {{ user.username ? user.username : '登录' }} <!-- 显示用户名或登录 -->
      </span>
        <span class="buttoninfo">客户端</span>

     </div>
     <div class="loginbottom">
        <div class="loginbottomleft">
        <div class="myorder">
            <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenjuicon"></use>
      </svg>
      <span class="mylist">我的订单</span>
      <div class="ordercount">0</div>
    </div>
        </div>
        <div class="loginbottomright">
            <div class="myorder">
      <span class="mylist">账户余额</span>
      <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-qianbao"></use>
      </svg>
      <div class="ordercount">0</div>
    </div>
        </div>
     </div>
    </div>
    <div class="bodylist">
        <div class="eachlist">
            <img src="/image29.png" alt="">
            <span>实名认证</span>
        </div>
        <div class="eachlist">
            <img src="/image30.png" alt="">
            <span>优惠卷</span>
        </div>
        <div class="eachlist">
            <img src="/image31.png" alt="">
            <span>我的收藏</span>
        </div>
        <div class="eachlist">
            <img src="/image32.png" alt="">
            <span>用户反馈</span>
        </div>
        <div class="eachlist">
            <img src="/image33.png" alt="">
            <span>联系客服</span>
        </div>
        <div class="eachlist" id="lasteachlist">
            <img src="/image34.png" alt="">
            <span>设置</span>
        </div>
    </div>
    <!-- 设置底部空格，无实际作用 -->
    <div class="footer"></div>
    <footerNav/>
</template>
<script>
import { useStore } from 'vuex';
import footerNav from '@/components/home/footerNav.vue';

export default{
    setup() {
    const store = useStore();
    const user = store.getters.getUser;

    return { user };
  },
    components:{
        footerNav,
    },
  
    methods:{
        gotologin(){
            this.$router.push('login');
        }
    }
}
</script>
<style scoped>
 .top{
    width: 7.24rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    font-size: 22px;
    font-weight: 800;
 }
 .loginbox{
    margin-top: 10px;
    position: relative;
    width: 7rem;
    height: 3rem;
    box-shadow: 3px 3px 3px 3px #888888;
    margin-left: 15px;
    border-radius: 10px;
 }
 .logintop img{
    border: 1px solid black;
    margin-top: 0.4rem;
    margin-left: 0.4rem;
    width:1.16rem;
    height:1.16rem;
    border-radius: 50%;
 }
 .loginname{
    font-size: 20px;
    font-weight: bold;
 }
 .buttoninfo{
    margin-top: .4rem;
    text-align: center;
    line-height: 0.7rem;
    width: 2rem;
    height: 0.74rem;
    position: absolute;
    top: 10px;
    right: 10px;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(42,130,228));
    border-radius: 20px/20px;
    color: #fff;
    font-size:20px ;
    font-weight: bold;


 }
 .loginbottom{
    display: flex;
 }
 .mylist{
    font-size: 20px;
    font-weight: bold;
 }
 .loginbottomleft{
    height: 52px;
    padding-right: 1.2rem;
    border-right: 1px solid black;
    margin-right:0.8rem;
 }
 .ordercount{
    margin-top: 10px;
    margin-left: 1rem;
    font-size: 0.4rem;
    color: #00BAAD;
 }
 .bodylist{
    margin-left: 6px;
    margin-top: 30px;
    width: 7.2rem;
    height: 8.42rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
.myorder{
    margin-top: 5px;
    margin-left: 10px;
}
.eachlist{

    display: flex;
    align-items: center;
    border-bottom: 1px solid gray;
    margin-top: 20px;
    padding: 3px;
}
.eachlist:hover{
    scale: 1.1;
}
.eachlist span{
    font-size: 16px;
    font-weight: bold;
    
}
.eachlist img{
    width: 50px;
    height:50px;
    margin-left: 0.4rem;
    margin-right: 10px;
}
#lasteachlist{
    border-bottom: none;
}
.footer{
    height: 110px;
}
</style>